<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <style th:fragment="cmsStyle">
        .cms-list .cover-img {
            display:table-cell; overflow: hidden; height:200px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle
        }
        .cms-list .cover-img img{
            width:520px; height:auto; vertical-align:middle;
        }
        .cms-list .cover-img1 {
            display:table-cell; overflow: hidden; height:200px; font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle
        }
        .cms-list .cover-img1 img{
            width:342px; height:200px; vertical-align:middle;
        }

        .layui-row{
            margin-top:10px;
            border-bottom: 0.8px solid #bdbdbd;
        }

        .info{
            margin:5px 0px;
        }

        .info p{
            margin:5px 0px;
            padding:1%;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }

        .info p:first-child span.title{
            font-size: 18px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }

        .info p:first-child span.status{
            font-size:12px;
            background: #ff8f20;
            padding:5px;
            border-radius: 2px;
        }

        .info p:first-child span.title{
            max-width:520px;
            cursor: pointer;
        }


        /* 设备最大宽度960px */
        @media screen and (max-width: 960px) {
            .info-list .cover-img img{
                width:200px;
                height:160px;
            }
        }
        /* 宽度大于480px且小于768px */
        @media screen and (min-width: 480px) and (max-width:768px) {
            .info-list .info p:first-child span.title{
                display: inline-block;
                font-size: 18px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                position: relative;
            }

            .info-list .info p:first-child span.status{
                display: inline-block;
                font-size:12px;
                background: #ff8f20;
                padding:5px;
                border-radius: 2px;
                position: absolute;
                right:5px;

            }
        }
        /* 设备最大宽度480px */
        @media screen and (max-width:480px){
            .info-list .info p:first-child span.title{
                display: inline-block;
                font-size: 18px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                position: relative;
            }

            .info-list .info p:first-child span.status{
                display: inline-block;
                font-size:12px;
                background: #ff8f20;
                padding:5px;
                border-radius: 2px;
                position: absolute;
                right:5px;

            }
        }
    </style>

    <style th:fragment="infoStyle">
        .info-list .cover-img {
            display:table-cell;  font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle
        }
        .info-list .cover-img img{
            height:260px; width:auto; vertical-align:middle;
        }

        .info-list .cover-img1 {
            display:table-cell;  font-size:118px; border:1px solid #beceeb; text-align:center; vertical-align:middle
        }
        .info-list .cover-img1 img{
            height:260px; width:auto; vertical-align:middle;
        }

        .layui-row{
            margin-top:10px;
            border-bottom: 0.8px solid #bdbdbd;
        }

        .info-list .info{
            margin:5px 0px;
            padding:10px;
        }

        .info-list .info p{
            margin:5px 0px;
            padding:1%;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }

        .info-list .info p:first-child span.title{
            font-size: 18px;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }

        .info-list .info p:first-child span.status{
            font-size:12px;
            background: #ff8f20;
            padding:5px;
            border-radius: 2px;
        }


        /* 设备最大宽度960px */
        @media screen and (max-width: 960px) {
            .info-list .cover-img img{
                width:200px; height: auto;max-width: 100%; display: block;vertical-align:middle;

            }
        }
        /* 宽度大于480px且小于768px */
        @media screen and (min-width: 480px) and (max-width:1024px) {
            .info-list .cover-img img{
                width:200px; height: auto;max-width: 100%; display: block;vertical-align:middle;

            }
        }


        @media screen and (min-width: 480px) and (max-width:768px) {
            .info-list .info p:first-child span.title{
                display: inline-block;
                font-size: 18px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                position: relative;
            }

            .info-list .info p:first-child span.status{
                display: inline-block;
                font-size:12px;
                background: #ff8f20;
                padding:5px;
                border-radius: 2px;
                position: absolute;
                right:5px;

            }
        }
        /* 设备最大宽度480px */
        @media screen and (max-width:480px){
            .info-list .info p:first-child span.title{
                display: inline-block;
                font-size: 18px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
                position: relative;
            }

            .info-list .info p:first-child span.status{
                display: inline-block;
                font-size:12px;
                background: #ff8f20;
                padding:5px;
                border-radius: 2px;
                position: absolute;
                right:5px;

            }
        }
    </style>
</head>
<body>
<div th:fragment="navFragment">
    栏目：
    {{if value.navType == 0}}
    <span class="layui-show-md-inline-block nav-type">电视</span>
    {{else if value.navType  == 1}}
    <span class="layui-show-md-inline-block nav-type">电影</span>
    {{else if value.navType  == 2}}
    <span class="layui-show-md-inline-block nav-type">网剧</span>
    {{else if value.navType  == 3}}
    <span class="layui-show-md-inline-block nav-type">明星</span>
    {{else if value.navType  == 4}}
    <span class="layui-show-md-inline-block nav-type">综艺</span>
    {{else if value.navType  == 5}}
    <span class="layui-show-md-inline-block nav-type">时尚</span>
    {{else if value.navType  == 6}}
    <span class="layui-show-md-inline-block nav-type">音乐</span>
    {{else}}
    <span class="layui-show-md-inline-block nav-type">明星</span>
    {{/if}}
</div>

<div th:fragment="navCmsFragment">
    归属：
    {{if value.type == 0}}
    <span class="layui-show-md-inline-block nav-type">电视</span>
    {{else if value.type  == 1}}
    <span class="layui-show-md-inline-block nav-type">电影</span>
    {{else if value.type  == 2}}
    <span class="layui-show-md-inline-block nav-type">网剧</span>
    {{else if value.type  == 3}}
    <span class="layui-show-md-inline-block nav-type">明星</span>
    {{else if value.type  == 4}}
    <span class="layui-show-md-inline-block nav-type">综艺</span>
    {{else if value.type  == 5}}
    <span class="layui-show-md-inline-block nav-type">时尚</span>
    {{else if value.type  == 6}}
    <span class="layui-show-md-inline-block nav-type">音乐</span>
    {{else if value.type  == -1}}
    <span class="layui-show-md-inline-block nav-type">首页</span>
    {{else if value.type  == 99}}
    <span class="layui-show-md-inline-block nav-type">轮播</span>
    {{/if}}
</div>
<table >
    <tr th:fragment="openNavFragment">
    {{if value.navType == 0}}
    电视
    {{else if value.navType == 1}}
    电影
    {{else if value.navType == 2}}
    网剧
    {{else if value.navType == 3}}
    明星
    {{else if value.navType == 4}}
    综艺
    {{else if value.navType == 5}}
    时尚
    {{else if value.navType == 6}}
    音乐
    {{/if}}
    </tr>
</table>



</body>
</html>

